<template>
  <view class="wrap">
    <view class="topWrap" @click="addAddressAction">
      <up-text type="" color="#fff" text="添加新的收获地址" align="center" size="28" ></up-text>
    </view>
    <view class="list">
      <common-scroll-view :loading="loading" :pageNum="pageNum" :pageSize="pageSize" :total="total" :data="addressList"
        @onRefresh="onRefreshBack" @getMore="scrolltolower">
        <view v-for="item in addressList" @click="selectAddress(item)" class="address-container row between">
          <view style="width: 80%">
            <up-text type="main" size="28" margin="0 0 30rpx" :text="item.name"></up-text>
            <up-text margin="0 0 24rpx" :text="`${item?.province || ''}${item?.city || ''}${item?.area || ''}${item?.detail || ''}`"></up-text>
            <up-text :text="item.phone"></up-text>
            <view v-if="`${item.isDefault}`=== '1'" class="defaultItem">
              <up-text type="" color="#fff" text="默认地址" align="center"></up-text>
            </view>
          </view>
          <view @click.stop>
            <view @click="editAddress(item)">
              <up-icon name="edit-pen" color="#101010" size="52" :stop="true"></up-icon>
            </view>
          </view>
        </view>
      </common-scroll-view>
    </view>
    <view class="bottomWrap" ></view>
  </view>
</template>

<script>
import { getAddressList, deleteAddress } from '@/services/address';

export default {
  data() {
    return {
      pageSize: 5,
      pageNum: 1,
      addressList: [],
      triggered: false,
      total: 0,
      loading: true,
    }
  },

  onShow() {
    this._freshing = false;
    this.getAddressListAction(1);
  },

  onUnload() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel?.emit('addressBack', '');
  },

  methods: {
    async getAddressListAction(num) {
      this.loading = true;
      const res = await getAddressList({
        pageSize: this.pageSize,
        pageNum: num,
      })
      this.loading = false;
      if (num === 1) {
        this.triggered = true;
      }
      if (res.success) {
        this.pageNum = num;
        this.total = res.data.length;
        this.pageSize = res.data.length;
        this.addressList = res.data;
      }
    },

    addAddressAction() {
      uni.navigateTo({
        url: '/pages/addressInfo/index'
      });
    },

    editAddress(item) {
      const _that = this;
      uni.navigateTo({
        url: `/pages/addressInfo/index?isEdit=${true}`,
        events: {
          deleteAddress: (id) => {
             _that.getAddressListAction(1);
            const eventChannel = _that.getOpenerEventChannel();
            eventChannel?.emit('deleteAddress', id);
          }
        },
        success: (res) => {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('addressDetail', {
            data: item,
          })
        }
      });
    },

    async onRefreshBack(callback) {
      if (!this.loading) {
        await this.getAddressListAction(1);
      }
      callback();
    },

    scrolltolower() {
      this.getAddressListAction(this.pageNum + 1);
    },

    selectAddress(e) {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel?.emit('selectAddress', e);
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.address-container {
  width: calc(100vw - 120rpx);
  margin: 30rpx;
  background-color: #F4F6F9;
  border-radius: 28rpx;
  padding: 24rpx 30rpx;
  position: relative;
}

.list {
  height: calc(100vh - 88rpx - constant(safe-area-inset-bottom));
  height: calc(100vh - 88rpx - env(safe-area-inset-bottom));
  width: 100%;
}

.topWrap {
  width: 104vw;
  height: 88rpx;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  background-image: url('../../static/login.png');
  background-size: cover;
  background-position: center center;
}

.bottomWrap{
  width: 100vw;
  height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
.defaultItem{
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  width: 56px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #79C435;
  border-radius: 7px;
}
</style>
